<script lang="ts">
export default {
  name: 'Study6StuDemo3'
}
</script>

<template>
  <h2>组件事件:emit</h2>
  <div class="note"></div>

  <hr class="hr-style" />
  <div class="group">
    <h3>SonDemo1</h3>
    <SonDemo1 @son-emit="emitHandler"></SonDemo1>
  </div>
  <div class="group">
    <h3>SonDemo2</h3>
    <SonDemo2 @son-emit="emitHandler" @son-emit2="emitHandler2"></SonDemo2>
  </div>
  <div class="group">
    <h3>SonDemo4</h3>
    <SonDemo4 @editUser="editUserHandler"></SonDemo4>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type Iuser } from './components2/SonDemo4.vue'
import SonDemo1 from './components2/SonDemo1.vue'
import SonDemo2 from './components2/SonDemo2.vue'
import SonDemo3 from './components2/SonDemo3.vue'
import SonDemo4 from './components2/SonDemo4.vue'
// const isShow = ref(false)
// const emitHandler = ()=>{
//   isShow.value = !isShow.value
// }
const emitHandler = (fc: Function) => {
  fc()
}

const emitHandler2 = (fc: Function) => {
  fc()
}

const editUserHandler = (user: Iuser) => {
  console.log(user, 'editUserHandler')
}
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 20px 0;
  padding: 10px;
}
</style>
